import React, { useMemo, useState } from 'react';
import {  Popover } from 'antd';
import type { PopoverProps } from 'antd';


interface Reply {
  id: number;
  text: string;
}

interface Comment {
  id: number;
  text: string;
  replies: Reply[];
}

const buttonWidth = 60;
const content = (
  <div>
    <p>添加评论</p>
  </div>
);

const Index:React.FC = () => {

const [claghe,setClaghe]=useState(false)
    const [arrow, setArrow] = useState<'Show' | 'Hide' | 'Center'>('Show');

  const mergedArrow = useMemo<PopoverProps['arrow']>(() => {
    if (arrow === 'Hide') {
      return false;
    }

    if (arrow === 'Show') {
      return true;
    }

    return {
      pointAtCenter: true,
    };
  }, [arrow]);

  const toAbc=()=>{
    setClaghe(!claghe)
  }

  const [comments, setComments] = useState<Comment[]>([]);
  const [commentText, setCommentText] = useState<string>('');
  const [replyText, setReplyText] = useState<string>('');
  const [replyingTo, setReplyingTo] = useState<number | null>(null);

  const handleAddComment = () => {
    if (commentText.trim()) {
      const newComment: Comment = {
        id: Date.now(),
        text: commentText.trim(),
        replies: [],
      };
      setComments([...comments, newComment]);
      setCommentText('');
    }
  };

  const handleAddReply = (commentId: number) => {
    if (replyText.trim()) {
      const newReply: Reply = {
        id: Date.now(),
        text: replyText.trim(),
      };
      
      setComments((prevComments) =>
        prevComments.map(comment =>
          comment.id === commentId
            ? { ...comment, replies: [...comment.replies, newReply] }
            : comment
        )
      );
      setReplyText('');
      setReplyingTo(null); // Clear replying state
    }
  };

  return (
    <div>
        <div style={{textAlign:'center'}} className='icon-pinglun_165'>
        <Popover placement="bottom" content={content} arrow={mergedArrow}>
      <i className='iconfont icon-pinglun_16' onClick={toAbc}></i>
      </Popover>    
        </div>
        

        <div className={`commentsBox ${claghe==true?'':'shuiyin'}`}>
      
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <div>{comment.text}</div>
            <button onClick={() => setReplyingTo(comment.id)}>回复</button>
            {replyingTo === comment.id && (
              <div>
                <textarea
                  value={replyText}
                  onChange={(e) => setReplyText(e.target.value)}
                  placeholder="写下你的回复..."
                />
                <button onClick={() => handleAddReply(comment.id)}>添加回复</button>
              </div>
            )}
            {comment.replies.length > 0 && (
              <ul>
                {comment.replies.map((reply) => (
                  <li key={reply.id}>{reply.text}</li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
      <textarea className='asdflyr'
        value={commentText}
        onChange={(e) => setCommentText(e.target.value)}
        placeholder="写下你的评论..."
      />
      <button onClick={handleAddComment} className='asdflyrbot'>添加评论</button>
        </div>
    </div>
  )
}

export default Index
